<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2024-07-18 22:55:31
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-07-20 00:11:25
-->
<template>
  <div ref="containerRef" class="mapview"></div>
</template>

<script lang="ts" setup>
import "@amap/amap-jsapi-types";
import { onMounted, ref } from "vue";

const containerRef = ref<HTMLDivElement>();
const map = ref<AMap.Map>();

/**
 *
 */
const initMap = () => {
  let contianer = containerRef.value as HTMLDivElement;
  map.value = new AMap.Map(contianer, {
    zoom: 10,
    center: [106, 26],
    mapStyle: "amap://styles/whitesmoke",
  });
};

onMounted(() => initMap());
</script>
<style lang="less" scoped>
.mapview {
  width: 100%;
  height: 100%;
}
</style>
